<include file="Public:base"/>

<body id="index" onresize="whenResize();">
    <!--[if lt IE 8]>
    <div id="bodyMask2" class="browser-mask"></div>
    <div class='browser-box'>
        <h2>噢，您是否知道您正在使用的浏览器无法完全支持我们的页面？</h2>
        <h3>很抱歉，由于采用了HTML5，当前浏览器无法完美呈现该页面。</h3>
        <div>
            <span>如果你还不知道什么是HTML5标准，请看<a href="http://zh.wikipedia.org/wiki/HTML5" target='_blank'>维基百科</a>。</span>建议您使用以下浏览器的最新版本： 
        </div>
        <ul>
            <li><a class="ico icoChrome" title='谷歌Chrome浏览器' href="http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html" target='_blank'></a></li>
            <li><a class="ico icoOpera" title='Opera浏览器' href="http://www.opera.com/" target='_blank'></a></li>
            <li><a class="ico icoFirefox" title='火狐浏览器' href="http://www.firefox.com.cn/download/" target='_blank'></a></li>
            <li><a class="ico icoSafar" title='Safar浏览器' href="http://www.apple.com.cn/safari/download/" target='_blank'></a></li>
        </UL>

        
    </div>
    <![endif]-->
	<div id="wrapper">
        <div id="QRcode">
        	<script type="text/javascript">
                var isOpen = false;
				function openQRcode(){
					$("#QRcode").css("display","block");
					$("#QRcode").animate({height: '290px'},500,"easeOutExpo",function(){isOpen = true;});
				}
				function closeQRcode(){
					$("#QRcode").animate({height: '0px'},500,"easeOutExpo",function(){isOpen = false;$("#QRcode").css("display","none");});
				}
                
                function whenResize(){
                    var w = parseInt($('body').css('width').replace('px',''));
                    if (w&&w<=900&&isOpen){
                        closeQRcode();
                    }
                }
			</script>
       		<div class="QRimage">
            	<div class="weixin"></div>
                <div class="chupin"></div>
            </div>
            <a href="javascript:void(0);" onclick="closeQRcode();"></a>
            <div class="QRjiao"></div>
        </div><!--#QRcode-->
        <header>
        	<a class="logo" href="__MODULE__"></a>
        
            <div id="navigator" class="clearfix">
            	<nav class="clearfix">
                <ul>
                	                	<script type="text/javascript">
						var current = 1;
						var tickPlaying = false;
                    	function playTick(n){
							if (n == current)
							return;
							if (tickPlaying)
							return;
							
							$("#tick"+current).css("left","0px");
							$("#title"+current).css("color","#999999");
							
							tickPlaying = true;
							$("#tick"+n).animate({left: '19px'},300,'linear',function(){tickPlaying = false;});
							$("#title"+n).css("color","#000000");
							
							current = n;
						}
						function setCurrent(n){
							$("#tick"+n).css("left","19px");
							$("#title"+n).css("color","#000000");
						}
                    </script>
                    <li>
                        <div>
                            <div id="tick1" ></div>
                        </div>
                        <a id="title1" href="__URL__/Index" onclick="playTick(1);" style="color: rgb(0, 0, 0);">BLOG</a>
                    </li> 
                    <li>
                        <div>
                            <div id="tick2" ></div>
                        </div>
                        <a id="title2" href="__MODULE__/About/contact" onclick="playTick(2);" style="color: rgb(0, 0, 0);">contact</a>
                    </li> 
                    <li>
                        <div>
                            <div id="tick3" ></div>
                        </div>
                        <a id="title3" href="__MODULE__/About/about" onclick="playTick(3);" style="color: rgb(0, 0, 0);">ABOUT</a>
                    </li> 
                    
                </ul>
                </nav>
            </div><!--navigator-->
            
            <script type="text/javascript">
            	var p = 1;
				setCurrent(p);
            </script>
            <div id="category-container">
                <script type="text/javascript">
                    var isMenuOpen = false;
                    var isMenuPlaying = false;
                    function toggleMenu(){
                        if (isMenuPlaying){
                            return;
                        }
                        if (isMenuOpen){
                            isMenuPlaying = true;
                            $("#menu-container").animate({height:"0px"},200,"easeOutExpo",function(){
                                isMenuOpen = false;
                                isMenuPlaying = false;
                            });
                        }else{
                            isMenuPlaying = true;
                            $("#menu-container").animate({height:"144px"},200,"easeOutExpo",function(){
                                isMenuOpen = true;
                                isMenuPlaying = false;
                            });
                        }
                    }
                </script>
                 <div id="menu-wraper" onclick="toggleMenu();">
                    <div id="menu-button">
                        <p href="">
                            <span></span>
                        </p>
                    </div>
                   
                </div> 
            </div>
            
            <div id="menu-container">
                <div id="menu-list">
                    <ul>
                        <li><a class="current" href="__URL__/Index">BLOG</a></li>
                        <li><a  href="__MODULE__/About/contact">contact</a></li>
                        <li><a  href="__MODULE__/About/about">ABOUT</a></li>
                    </ul>
                </div>
            </div>
            
        </header><div id="banner">
    
    <div id="display">
         <div class="slider com-banner">
            <div class="btn-left"><i></i></div>
            <div class="btn-right"><i></i></div>
            <div class="com-banner-photo">
                <ul>
            <li class="com-banner-pic1"><img src="__PUBLIC__/images/banner.png"/></li>
                    <li class="com-banner-pic2"><a href="#2" onclick="window.open(jinbi_url+'/banner1','_self');return false;"><img src="__PUBLIC__/images/banner.png"/></a></li>
                    <li class="com-banner-pic3"><a href="#3" onclick="window.open(jinbi_url+'/banner2','_self');return false;"><img src="__PUBLIC__/images/banner.png" /></a></li>
                    <!--li class="com-banner-pic3"><a href="#3" onclick="window.open(jinbi_url+'/banner3','_self');return false;"><img src="#" /></a></li-->
                </ul>
            </div><!-- 图片 -->
            <div class="com-banner-hover">
                <script>
                    var jinbi_url = '#';
                </script>
                <div class="com-banner-navigation">
                    <ul>
                        <li><a href="#1"><canvas id="dotCanvas1" width="12" height="12"></canvas></a></li>
                        <li><a href="#2"><canvas id="dotCanvas2" width="12" height="12"></canvas></a></li>
            			<li><a href="#3"><canvas id="dotCanvas3" width="12" height="12"></canvas></a></li>
                        <!--li><a href="#3"><canvas id="dotCanvas3" width="12" height="12"></canvas></a></li-->
                    </ul>
                  </div><!-- 点导航 -->
                </div><!-- 浮动导航层 -->
            </div>
     </div>
</div>
<script type="text/javascript" src="__PUBLIC__/js/banner.js"></script><script type="text/javascript" src="__PUBLIC__/js/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/imagesloaded.pkgd.min.js"></script>
<div id="content">
       
            <script type="text/javascript">
                var currentCategory = '';
                function getBlog(category){
                	return false;
                	
                    if (currentCategory==category){
                        return ;
                    }
                    if (window.searchKey){
                        window.searchKey = false;
                    }
                    if(currentCategory==''){
                        $('#li-all').removeClass('li-active');
                    }else{
                        $('#li-'+currentCategory).removeClass('li-active');
                    }
                    currentCategory = category;
                    if(currentCategory==''){
                       $('#li-all').addClass('li-active');
                    }else{
                        $('#li-'+currentCategory).addClass('li-active');
                    }
                    var elems = msnry.getItemElements();
                    msnry.remove(elems);
                    showLoadMore(false,false);
                    $('.blog-loading').show();
                    $('.bloglist').css('height','750px');
                    //showLoadMore(true,true);
                    queryPosts(currentCategory,1,function(msg){
                        if(msg.length==0){
                            //$('.blog-loading').hide(); 
                            showLoadMore(false,false);  
                            return;
                        }
                        $('.blog-loading').hide();
                        showLoadMore(false,false); 
                        var nodes = $(msg);
                        var count = 0;
                        var sId = setInterval(function(){
                            if(count<nodes.length){
                                var elm = nodes[count];
                                $('.bloglist').append(elm);
                                msnry.appended(elm);
                                var container = document.querySelector('.bloglist');
                                imagesLoaded(container,function(){
                                    msnry.layout();
                                });
                                count++;
                            }else{
                                clearInterval(sId);
                                if (nodes.length==perpage){
                                    showLoadMore(true,false);
                                    scrollLoad();
                                }
                                
                            }
                        },100);
                    });
                }
                function queryPosts(cg,pn,fn){
                    var p;
                    if (window.searchKey){
                        p={action:'searchPosts',pageNum:pn,searchKey:window.searchKey};
                        $.post('./ajax',p,fn);
                        return;
                    }
                    if (cg!=''){
                        p = {action:'queryPosts',category:cg,pageNum:pn};
                    }else{
                        p = {action:'queryPosts',pageNum:pn};
                    }

                    $.post('./ajax',p,fn);
                }
            </script>
    
            <script type="text/javascript">
                var isLoading = false;
                var currentId ;
            	function showLoading(event,id){
                    var mouseCode = event.which || event.button;
                    if (mouseCode==1){
                        if(isLoading){
                            hideLoading(currentId);
                        }
                        $('#post-'+id+' .cover-text').removeClass().addClass('cover-text-hover');
                        $('#post-'+id+' .text-detail').hide();
                        $('#post-'+id+' .cover-loading').show();
                        isLoading = true;
                        currentId = id;
                        var w = parseInt($('body').css('width').replace('px',''));
                        if (w&&w<=700){
                            setTimeout(function(){hideLoading(currentId);},3000);
                        }
                        
                    }
				}
                function hideLoading(id){
                    $('#post-'+id+' .cover-text-hover').removeClass().addClass('cover-text');
                    $('#post-'+id+' .text-detail').show();
                    $('#post-'+id+' .cover-loading').hide();
                    isLoading = false;
                }
                
            </script>
<section class="bloglist" style="position: relative; height: 1176px;">
    <div class="grid-sizer"></div>
    <div class="gutter-sizer"></div>
    <div class="blog-loading"></div>
 
 
<volist name='data' id='vo'>                
<article class="item" id="post-1220">
    <div class="blog-cover">
    <img src="__ROOT__{$vo.img}">

    <div class="cover-text">
        <a href="__MODULE__/Article/show/id/{$vo.id}" onclick="showLoading(event,1220);">
            <div class="text-detail">
                <p class="text-read">阅读详细</p>
                <p class="text-line">————————</p>
                
                <p class="text-author">{$vo.author}</p>

            </div>
            <div class="cover-loading"></div>
        </a>

    </div>

    </div>
    <div class="blog-title">
    <h2 style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"><a href="#">{$vo.title}</a></h2>
    </div>
    <div class="blog-info clearfix">
    <div class="view view-amount"><i class="icon-amount"></i>{$vo.hits}</div>
    </div>
    <div class="blog-content">
    <p>{$vo.content|filterHtml=80}</p>
    </div>
</article>
</volist>

</section><!--section .bloglist-->
<script type="text/javascript">
    var msnry;
    var imageLoaded = false;
    $(window).on('load', function(){
        var container = document.querySelector('.bloglist');
        imagesLoaded(container,function(){
                msnry = new Masonry( container, {
                columnWidth: '.grid-sizer',
                itemSelector: '.item',
                gutter: '.gutter-sizer',
                hiddenStyle: { opacity: 0, transform: 'translateY(50px)' },
                visibleStyle:{ opacity: 1, transform: 'translateY(0px)' }
            });
            imageLoaded = true;
        });
         
    });

        
    </script>
</div>


<script type="text/javascript" src="__PUBLIC__/js/jquery.transit.min.js"></script>

<include file="Public:footer"/>
</div>
</body>
</html>